<docs>
  ## 申请信息查询
  ## props
</docs>
<template>
  <div>
    <mheader class="index" @back_btn="goBack()" title="我的预约"></mheader>
    <div class="search">
        <ul class="item-wrap">
          <p class="_tip">说明：预约业务办理日期前一天15点前可以取消预约。</p>
          <li class="item" v-for="(item, index) in List" :key="index">
            <div class="item-title-wrap">
              <p>{{item.jgmc}}</p>
            </div>
            <div class="item-title-wrap">
              <div class="item-title-text">
                <p class="item-left" v-show="item.sj">预约时间：<span>{{item.sj}}</span></p>
                <p class="item-left" v-show="item.qxsj">取消时间：<span>{{item.qxsj}}</span></p>
                <p class="item-left">{{item.nr}}</p>
              </div>
              <div class="item-title-text-r">
                <p class="item-right zt-dqy" v-show="item.sfkqx=='1'" @click="qx(item)">取消预约</p>
                <p class="item-right" v-show="item.sfkqx=='0'">已取消预约</p>
                <p class="item-right rightspan" v-show="item.sfkqx!='0'&&item.sfkqx!='1'">已办理</p>
              </div>
            </div>
          </li>
        </ul>
    </div>
    <!-- 上拉刷新 -->
    <pagination-list @pullingDown="asyncFetch"
      :no-data="noData" class="search-result"
      :ajax-loading="ajaxLoading">
    </pagination-list>
  </div>
</template>
<script>
import Mheader from "@/ldry/group/mheader/mheader";
import $ from "@/common/js/axios";
import PaginationList from "@/ldry/group/paginationList/paginationList";

export default {
  components: {
     Mheader,PaginationList
  },
  name: "dayyList",
  data() {
    return {
      List: [],
      page:1,
      pageSize: 10,
      ajaxLoading: false,
      noData:false
    };
  },
  methods: {
    // 取消
    qx(id){
      this.$confirm('是否取消'+ id.sj+ id.qxsj +id.nr +'预约？', '', {
        cancleBtnText: '取消',
        confirmBtnText: '确认'
      }).then(() => {
        $.post('/dafwgl/yyQx',{yyid:id.yyid}).then((res)=>{
          const flag = parseInt(res.returnData.executeResult, 10);
          if (flag === 1) {
            this.$alert({
              type: 'success',
              message: '该预约取消成功!'
            });
            this.GET_reverseList()
          } else {
            this.$alert({
              type: 'warning',
              message: res.returnData.message
            });
          }
        }).finally();
      }).catch(() => {});
    },
    asyncFetch(page) {
      this.GET_reverseList(page);
    },
    // 获取申请列表
    GET_reverseList(page = 1) {
      this.ajaxLoading = true;
      $.get("/dafwgl/wdyyCx", {params:{ pageSize: this.pageSize, pageNum: page }} )
        .then(res => {
          const data = res.returnData;
          // 无查询结果
          if (+data.executeResult === 0) {
            this.noData = true;
            if (page === 1) {
              this.List = []
            }
          } else {
            this.noData = false;
            // 有数据
            if (page === 1) {
              this.List = data.wdyy;
            } else {
              this.List = this.List.concat(data.wdyy);
            }
            if (res.rowsCount -res.startNum < this.pageSize ) {
              this.ajaxLoading = true;
            }
          }
        })
        .finally(() => {
          this.ajaxLoading = false;
          this.noData = true;
        });
    },
    // ----
    goBack() {
      this.$router.go(-1);
    }
  },
  created() {
    this.GET_reverseList();
  }
};
</script>
<style lang="scss" scoped>
@import "~common/scss/variable.scss";
.search {
  .title {
    font-size: 45px;
    color: #fff;
    box-sizing: border-box;
    height: 8%;
    padding: $padding-base;
    background-color: #2e7ef7;
  }
  .item {
    border: $border;
    background-color: #fff;
    margin-bottom: $margin-base;
    .item-title-wrap{
      border-bottom: $border;
      padding: $padding-base $padding-base $padding-base/2 $padding-base;
      color: $color-text-label;
      overflow: hidden;
    }
    .item-title-text-r {
      p{
        padding-bottom: $padding-base / 2;
      }
      float: right;
      text-align: right;
      width: 30%;
    }
    .item-title-text {
      p{
        padding-bottom: $padding-base / 2;
      }
      float: left;
      width: 70%;
    }
    .zt-dqy {
      color: $color-base;
    }
  }
  /* 箭头 */
  .arrow::before {
    content: "";
    width: 30px;
    height: 30px;
    border-top: 5px solid #fff;
    border-left: 5px solid #fff;
    transform: rotate(-45deg);
    float: left;
    margin: 50px 0 0 50px;
  }
  .item-wrap {
    font-size: $font-size-base;
    ._tip{
      padding : $padding-base/2;
    }
  }
}
</style>
